<template>
  <div>
    <div>
      <div style="padding: 10px">
        <div class="grid-content bg-purple-light" style="text-align: left">
          <el-button @click="OpenDialog =true" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">新增</el-button>
          <el-button @click="EditDialog" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">编辑</el-button>
          <el-button @click="del" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">删除</el-button>
          <div  style="text-align: left">
            <el-dialog title="新增数据库配置" :visible.sync="OpenDialog" style="width: 850px;left: 18%" :close-on-click-modal="false" >
              <el-form v-model="MysqlForm"   class="demo-ruleForm" style="text-align: right">

                <el-form-item label="IP地址:"  prop="hostName">
                  <el-input style="width:300px" type="text" v-model="MysqlForm.hostName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库名称:" prop="baseName">
                  <el-input style="width:300px" type="text" v-model="MysqlForm.baseName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="登陆名称:"  prop="userName">
                  <el-input style="width:300px" type="text" v-model="MysqlForm.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="passWord">
                  <el-input style="width:300px" type="text" v-model="MysqlForm.passWord" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="端口号:" prop="port">
                  <el-input style="width:300px" type="text" v-model="MysqlForm.port" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeForm">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        v-model="multipleSelection"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" stripe:true width="55">
        </el-table-column>
        <el-table-column prop="userName" label="登陆名" width="180">
        </el-table-column>
        <el-table-column prop="passWord" label="密码" width="180">
        </el-table-column>
        <el-table-column prop="hostName" label="ip地址" width="180">
        </el-table-column>
        <el-table-column prop="port" label="端口号" width="150">
        </el-table-column>
        <el-table-column prop="baseName" label="数据库名称" >
        </el-table-column>
      </el-table>

    </div>
  </div>

</template>

<style>
  .el-table{
    text-align: center;
  }
</style>

<script >

  export default {
    data() {
      return {
        multipleSelection:[],
        OpenDialog:false,
        msg: '数据库管理',
        tableData:[],
        MysqlForm:{
          userName:'',
          passWord:'',
          port:'',
          apiType:1,
          mysqlID:'',
          baseName:'',
          hostName:''
        },
        multipleTable:[],
      }
    },
    methods: {
      closeForm: function () {
        this.OpenDialog = false;
        this.$refs.multipleTable.clearSelection();

      },
      addenv: function () {
        this.OpenDialog = true;
      },
      submit: function () {
        this.$axios.post("/api/EditMysqlConf",
          this.MysqlForm
        ).then(Response => {
            this.flush(),
              this.$notify({
                message: Response.data.msg,
                duration: 1000
              });
            this.MysqlForm.userName="";
            this.MysqlForm.port="";
            this.MysqlForm.passWord="";
            this.MysqlForm.baseName="";
            this.MysqlForm.hostName="";
            this.OpenDialog = false;
            this.$refs.multipleTable.clearSelection();
          }
        )
      },
      /*
              toggleSelection(rows) {
                if (rows) {
                  rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                  });
                } else {
                  this.$refs.multipleTable.clearSelection();
                }
              },
      */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      flush: function () {
        this.$axios.post("/api/GetMysqlConf", {}).then(Response => {
          var data = [];
          for (let i = 0; i < Response.data.length; i++) {
            var obj = {};
            obj.userName = Response.data[i].userName;
            obj.passWord = Response.data[i].passWord;
            obj.hostName = Response.data[i].hostName;
            obj.baseName = Response.data[i].baseName;
            obj.mysqlID = Response.data[i].mysqlID;
            obj.port = Response.data[i].port;
            data[i] = obj;
          }
          this.tableData = data;
        })
      },
      //删除
      del: function () {
        let arr = this.multipleSelection;
        if(arr.length == 0){
          this.$notify({
            message: '请先勾选删除项',
            duration: 1000
          })
        } else if(arr.length >1){
          this.$notify({
            message: '只能删除一项',
            duration: 1000
          });
          this.$refs.multipleTable.clearSelection();
        }else {
          this.$axios.post("/api/DelectMysqlConf?mysqlID="+arr[0].mysqlID,
          ).then(Response => {
              this.flush(),
                this.$notify({
                  message: Response.data.msg,
                  duration: 1000
                });
              this.flush();
            }
          )
        }
      },
      //编辑
      EditDialog: function () {
        let arr = this.multipleSelection;
        if(arr.length == 0){
          this.$notify({
            message: '请先勾选',
            duration: 1000
          })
        } else if(arr.length >1){
          console.log(arr.length)
          this.$notify({
            message: '只能编辑一项',
            duration: 1000
          });}else {
          this.$axios.post("/api/GetOneMysqlConf?mysqlID=" + arr[0].mysqlID
          ).then(Response => {
            this.MysqlForm.userName = Response.data.userName;
            this.MysqlForm.port = Response.data.port;
            this.MysqlForm.passWord = Response.data.passWord;
            this.MysqlForm.baseName = Response.data.baseName;
            this.MysqlForm.hostName = Response.data.hostName;
            this.MysqlForm.mysqlID = Response.data.mysqlID;
          })
          this.MysqlForm.apiType = 2;
          this.OpenDialog = true;
        }

      }
    },

    created:function () {
      this.flush()
    },
  }

</script>
